<template>
  <div class="home">
    <h1>主要是为了演示 rem和vw适配</h1>
    <img alt="Vue logo" src="../assets/logo.png" class="imgs" />
    <p class="p1">我是最帅的</p>
    <p
      style="font-size: 20px"
      :style="{ color: '#fff', height: '40px', background: color }"
    >
      行内样式不能转化为vw
    </p>
    <p class="p2">默认媒体查询不会被转化</p>
    <div>
      <van-button type="primary" size="large">主要按钮</van-button>
      <van-button type="success" size="small">成功按钮</van-button>
      <van-button type="default">默认按钮</van-button>
    </div>
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <van-field v-model="text" type="password" label="密码" />
    <van-field v-model="text" label="文本" />
    <div style="text-align: left">
      <van-icon name="cart-o" color="#1989fa" size="50" />
      <van-icon name="fire-o" color="red" size="20" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, getCurrentInstance, defineAsyncComponent   } from "vue";
import LoadingCom from '../components/Loading.vue'

const testCom = defineAsyncComponent({
  // 工厂函数
  loader: () => import('../components/Test.vue'),
  // 加载异步组件时要使用的组件
  loadingComponent: LoadingCom,
  delay: 2000,
})

// const testCom = defineAsyncComponent(() => {
//   return import('../components/Test.vue')
// })

export default defineComponent({
  name: "Home",
  components:{
    testCom
  },
  setup() {
    const value = ref("");
    const text = ref("");
    // 获取vue实例对象
    const app = getCurrentInstance ()
    console.log(app?.appContext?.config?.globalProperties)

    return {
      value,
      text,
    };
  },
});
</script>

<style lang='scss'>
.imgs {
  margin-top: 30px;
  width: 120px;
  height: 120px;
}
.p1 {
  font-size: 20px;
}

@media (min-width: 350px) {
  .p2 {
    font-size: 16px;
    color: red;
  }
}
</style>
